const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// const txtToJs = require('./plugins/txt-to-js')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const eslint = require('eslint-webpack-plugin');

module.exports = {
    // entry: './path/to/my/entry/file.js',
    // mode: 'production',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'main.js',
        // chunkFilename: '[name].[contenthash].js', // 异步加载块的文件名
    },
    resolveLoader: {
        modules: ['node_modules', path.resolve(__dirname, 'loaders')]
    },
    // devServer: {
    //     hot: true, // 启用 HMR
    //     open: true, // 自动打开浏览器
    //     port: 9000, // 开发服务器端口
    // },
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: ['babel-loader', {
                    loader: 'raw-loader',
                    options: { log: true }
                }],
            },
            {
                test: /\.(png|jgp)$/,
                type: "asset/resource",
                generator: {
                    filename: "static/img/[name][ext]"
                }
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 指定自定义的 index.html 文件路径
            filename: 'index.html' // 生成的 HTML 文件名
        }),
        // new txtToJs({
        //     template: path.resolve(__dirname, 'src/first-plugin.txt'),
        //     filename: 'first-plugin.js'
        // }),
        new CleanWebpackPlugin(),
        // new BundleAnalyzerPlugin(),
        new eslint()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all', // 拆分哪些模块，可选值为all、async、initial
            // minSize: 2000, // 模块最小大小，只有大于该大小的模块才会被拆分
            minChunks: 1, // 最少被引用次数，只有被引用次数大于该值的模块才会被拆分
            maxAsyncRequests: 30, // 最大的异步请求数，超过该值则不会拆分模块
            maxInitialRequests: 30, // 最大的初始请求数，超过该值则不会拆分模块
            automaticNameDelimiter: '~', // 拆分后模块名称的连接符
            // name: false, // 拆分后模块的名称，默认为true，即根据模块名和缓存组名生成
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/, // 匹配需要拆分的模块的正则表达式
                    priority: -10 // 缓存组优先级，优先级高的会优先匹配
                },
                default: {
                    minChunks: 2, // 默认缓存组的最小被引用次数
                    priority: -20, // 默认缓存组的优先级
                    reuseExistingChunk: true // 如果模块已经被拆分到另一个 bundle 中，则重用该模块，而不是重新打包
                }
            }
        }
    }
};